/* 
    Document   : style.css
    Created on : 2011-12-11, 14:52:49
    Author     : jun.yan
    Description:
        Purpose of the stylesheet follows.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

/*start common css*/
.ui-header {
    clear: both;
    color: #ffffff;
    width: 100%;
    height: 84px;
    margin: 0px auto 0px auto;
    background: #3a3a3a;
    background-image: linear-gradient(bottom, rgb(13,12,13) 38%, rgb(88,92,92) 100%);
    background-image: -o-linear-gradient(bottom, rgb(13,12,13) 38%, rgb(88,92,92) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(13,12,13) 38%, rgb(88,92,92) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(13,12,13) 38%, rgb(88,92,92) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(13,12,13) 38%, rgb(88,92,92) 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.38, rgb(13,12,13)),
        color-stop(1, rgb(88,92,92))
        );
}
.ui-header .header-logo {
    float: left;
    height:100%;
}
.ui-header .header-logo img {
    margin: 10px 0px 0px 55px;
    width: 170px;
    height: 70px;
}

.ui-header .user_menu {
    height: 25px;
    float: right;
    margin: 0px 60px 0px 0px;
}

.ui-header .user_menu ul{
    margin: 12px 0px 0px 0px;
    font-weight: bold;
}

.ui-header .user_menu ul li {
    font-size: 16px;
    width: 56px;
    height: 25px;
    text-align: left;
}

.ui-header .user_menu ul li a{
    color:#FFFFFF;
}


.ui-nav-bar {
    clear: both;
    width: 100%;
    height: 25px;
    margin: 0px auto 0px auto;
    background: #3a3a3a;
    background-image: linear-gradient(bottom, rgb(42,42,42) 50%, rgb(55,55,55) 50%, rgb(79,79,79) 100%, rgb(37,37,37) 22%);
    background-image: -o-linear-gradient(bottom, rgb(42,42,42) 50%, rgb(55,55,55) 50%, rgb(79,79,79) 100%, rgb(37,37,37) 22%);
    background-image: -moz-linear-gradient(bottom, rgb(42,42,42) 50%, rgb(55,55,55) 50%, rgb(79,79,79) 100%, rgb(37,37,37) 22%);
    background-image: -webkit-linear-gradient(bottom, rgb(42,42,42) 50%, rgb(55,55,55) 50%, rgb(79,79,79) 100%, rgb(37,37,37) 22%);
    background-image: -ms-linear-gradient(bottom, rgb(42,42,42) 50%, rgb(55,55,55) 50%, rgb(79,79,79) 100%, rgb(37,37,37) 22%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.5, rgb(42,42,42)),
        color-stop(0.5, rgb(55,55,55)),
        color-stop(1, rgb(79,79,79)),
        color-stop(0.22, rgb(37,37,37))
        );
}
.ui-nav-bar ul {
    margin: 0px 0px 0px 200px;
}
.ui-nav-bar ul  li {
    border-left: 1px solid #000000;
    display: inline;
    float: left;
    font-size: 16px;
    height: 25px;
    text-align: left;
    -webkit-box-shadow: 0px 0px 0.7px 1px rgba(255,255,255,0.2) inset;
    box-shadow: 0px 0px 0.7px 1px rgba(255,255,255,0.2) inset;
}
.ui-nav-bar ul li a {
    display: block;
    width:100px;
    /*	margin: 0px 34px 0px 35px;*/
    position: relative;
    top: 2px;
    color: white;
    text-align: center;
}

.ui-nav-bar ul li input{
    margin: 0px 5px;
    width: 90px;
    position: relative;
    top: 1px;
    border-radius: 20px;
    height: 16px;
    padding: 0px 10px;
    text-align: center;
}

.ui-content {
    background: #ffffff;
    clear: both;
    width: 100%;
    margin: 0px auto 0px auto;
}
.ui-footer {
    clear: both;
    width: 100%;
    height: 100px;
    margin: 0px auto 0px auto;
    background: #3a3a3a;
    color: #ffffff;
}

/*end common css*/





/*start homepage css*/
.homepage-content .category {
    margin: 0px 0px 0px 92px;
}

.homepage-content .category ul {
    width: 103px; /* Width of Menu Items */
    border-bottom: 1px solid #ccc;
    position: relative;
    float: left;
}

.homepage-content .category ul li { 
    float: left; 
    height: 1%; 
}


.homepage-content .category li ul {
    position: absolute;
    left: 101px; /* Set 1px less than menu width */
    top: 0;
    display: none;
}

/* Styles for Menu Items */
.homepage-content .category ul li a {
    color:white;
    padding: 0px;
    border: 1px solid #ccc; 
    border-bottom: 0;
    display: block;
    font-size: 16px;
    width: 100px;
    height:25px;
    background: #3a3a3a;
}

/*#category li:hover ul, #category li.over ul { display: block; }*/
.homepage-content .category li:hover ul{ display: block; }

.homepage-content .window{
    border: 2px solid #BB9;	
    width: 684px;
    height: 400px;
    float: left;
    margin: 5px 0px 20px 5px;
}
.product-window{
    clear: both;
    background:#ffffff;	
    margin: 20px auto;
    border: 1px solid #ccc;
    width: 800px;
    height: auto;
    overflow: auto;
}

.product-window .window .window-title{
    font-size: 16px;
    border-bottom: 1px dashed #CCC;
    margin-right: 30px;
    padding: 5px;

}

.product-window .window .window-title p{
    width:695px;
    position: relative;
    float: left;
}


.product-window .window .window-title a{
    color:#000;
}

.product-window .window .product .product-prise .current-prise{
    color: red;
    font-size: 24px;
    font-weight: bold;
}

.product-window .window .product .product-prise .old-prise{
    text-decoration: line-through;
}

.product-window .window .product .time .time-title{
    font-weight: bold;
}

.product-window .window .product .time .deadline{
    color:red;
    letter-spacing: 1px;
}

.product-window>div{
    position: relative;
    float: left;
}

.product-window .window{
    width: 768px;
}


.window_board {
    margin: 5px 0px 5px 44px;
}


.product {
    position: relative;
    float: left;
    margin: 10px 20px 25px 0px;
    width: 172px;
}

.product_img {
    background: url(../img/p_pic_01.png);
    border: 1px solid #CCC;
    height: 200px;
}


/*end homepage css*/


/*start index css*/
.ui-content .index-content {
    clear: both;
    margin: 0px auto 0px auto;
    background: url(../img/890_367px.png);
    background-size: 100% 100%;
    height: 360px;
    width: 800px;
    box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.5);
    border-radius: 5px;
}
.ui-content .index-content .left-container, .ui-content .index-content .image-slide, .ui-content .index-content .hotsale-today {
    position: relative;
    float: left;
    height: 100%;
}
.ui-content .index-content .left-container {
    width: 230px;
}
.ui-content .index-content  .image-slide {
    width: 230px;
}
.ui-content .index-content .hotsale-today {
    width: 325px;
}
.ui-content .index-content .hotsale-today .hotsale {
    background: url(../img/red_background.png) no-repeat;
    height: 32px;
    color: white;
    font-weight: bold;
    padding: 7px 0px 0px 21px;
    margin: 18px 0px -25px -8px;
    z-index: 2;
    position: relative;
    font-size: 15px;
}
.ui-content .index-content .hotsale-today .hotsale-name {
    background: #1c1c1c;
    height: 45px;
    width: 360px;
    color: white;
    font-size: 14px;
    padding: 26px 0px 0px 10px;
    margin: 0px 0px 0px 0px;
    line-height: 140%;
    z-index: 1;
    position: relative;
}
.ui-content .index-content .hotsale-today .purchase-info {
    margin: 12px 0px 0px 10px;
    letter-spacing: 1px;
}
.ui-content .index-content .hotsale-today .purchase-info purchase_info  div  span {
    margin: 5px 0px 0px 0px;
}
.ui-content .index-content .hotsale-today .purchase-info .pricing-btn {
    clear: both;
    float: right;
    background: url(../img/prising_button.png) no-repeat;
    width: 97px;
    height: 25px;
    margin: 0px 50px 0px 0px;
    padding: 7px 8px 2px 20px;
    font-size: 16px;
    font-weight: bold;
}
.ui-content .index-content .hotsale-today .purchase-info .pricing-btn a:link {
    color:white;
}


.ui-content .intro {
    clear: both;
    margin: 0px auto 0px auto;
    height: 230px;
}
.ui-content .intro .intro-flag {
    width: 67px;
    height: 33px;
    background: url(../img/intro.png) no-repeat;
    background-size: 100% 100%;
    margin: 0px 0px 0px 104px;
    padding: 6px 0px 0px 23px;
    font-weight: bold;
    font-size: 16;
    color: white;
}
.ui-content .intro .intro-steps {
    margin: 5px 50px 0px 100px;
}
.ui-content .intro .intro-steps .each-step {
    float: left;
    width: 184px;
    margin: 0px 5px;
}
.ui-content .intro .intro-steps .each-step .step-img {
    height: 120px;
    /*	box-shadow: 0px 0px 1px 1px rgba(0,0,0,.3);*/
    outline:#dbdbdb solid thin;
}
.ui-content .intro .intro-steps .each-step .step-des {
    height: 42px;
    color: black;
    font-size: 12px;
}

/*end index css*/


/*start sign css*/
.ui-sign-box {
    display: none;
    width: 800px;
    height: 570px;
    position: fixed;
    text-shadow: none;
    font-weight: bold;
}
.ui-sign-box a {
    color: #FF8B41;
}
.ui-sign-box .sign-box-title {
    border-bottom: 1px solid #D0D0D0;
    height: 31px;
    padding-top: 20px;
}
.ui-sign-box div.sign-box-title .sign-title{
    font-size: 20px;
    margin: 0px 358px 0px 50px;
}
.ui-sign-box sign-content {
    height: 445px;
}
.ui-sign-box .sign-content .sign-fields {
    position: relative;
    float: left;
    width: 69%;
}
.ui-sign-box .sign-content .sign-fields .sign-field {
padding: 10px 0px 0px 80px;
font-size: 14px;
height: auto;
overflow: auto;
}
.ui-sign-box .sign-content .sign-fields .sign-field span{
    width: 115px;
    text-align: right;
    display: block;
    float: left;
}
.ui-sign-box .sign-content .sign-fields .sign-field input {
    border: 1px solid #d0d0d0;
    height: 26px;
    width: 220px;
}
.ui-sign-box .sign-content .sign-fields .sign-field p {
    font-size: 12px;
    padding: 0px 0px 0px 115px;
    color: #A6A9B9;
    text-shadow: none;
    font-weight: normal;
}
.ui-sign-box .sign-content .sign-fields .sign-field .ui-submit-btn1{
    margin-left: 115px;
    width: 71px;
    font-size: 20px;
    font-weight: bold;
}
.ui-sign-box .sign-content .sign-fields .sign-field .agreement {
    width: 19px;
    height: 12px;
    margin-left: 112px;
}

.ui-sign-box .sign-content .sign-fields .sign-field .remember-me {
    width: 19px;
    height: 12px;
    margin-left: 112px;
}


.ui-sign-box .sign-content .vendor-entry {
    position: relative;
    float: left;
    margin: 23px 0px 0px 0px;
    border-left: 1px solid;
    padding: 27px;
    height: 276px;
}


.ui-sign-box .sign-content .vendor-entry ul li {
    font-size: 12px;
    padding-top: 7px;
    color: #6da2fe;
}
.ui-sign-box .follow-us{
    clear: both;
    border-top: 1px solid #d0d0d0;
    position: relative;
    padding: 20px 0px 0px 105px;
    font-size: 16px;
}


.ui-sign-box .sign-content .sign-fields .signup-us{
    clear: both;
    position: relative;
    padding: 80px 0px 0px 195px;
}

.ui-sign-box .sign-content .sign-fields .signup-us .m-entry {
    padding: 0px 0px 0px 35px;
    background: url(../img/phone.png) no-repeat;

}



/*end sign css*/


/*start product css*/

.product-content{
    background: white;
    position: relative;
    clear: both;
    margin: 0px auto;
    width: 795px;
    border: 1px solid #CCC;
    height: auto;
    overflow: auto;
}
.product-board{
    width: 560px;
    height: auto;
    overflow: auto;
    padding: 10px;	
    background: #FFFFFF;
    position: relative;
    float: left;
}


.product-board .pic-area{
    position: relative;
    float: left;
    width: 236px;
    height: auto;

}

.product-board .pic-area .pic{
    width: 100%;    
    border:1px solid #ccc;
    height: 261px;
}

.product-board .pic-area .pic img{
    width: 100%;
    height: 90%;
}

.product-board .prising-area{
    position: relative;
    float: left;
    width: 300px;
    overflow: auto;
    margin: 0px 10px;
}

.refer-area{
    position: relative;
    float: left;
    width: 203px;
    background: white;
    padding-top: 12px;
}

.product-board .pic-area .sharing{
    padding-top: 6px;
    color: #555;
}

.product-board .pic-area .sharing span{
    vertical-align: top;
}



.product-board .pic-area .sharing .ui-btn2 {
    width: 60px;
    margin-right: 6px;  
    padding: 0px 7px;
}


.product-board .prising-area .id{
    color: #555;
}

.product-board .prising-area .title{
    font-size: 16px;
    font-weight: bolder;
    border-bottom: 1px darkgray dotted;
}

.product-board .prising-area .current-prise,
.product-board .prising-area .deadline,
.product-board .prising-area .product-color,
.product-board .prising-area .product-size,
.product-board .prising-area .deal-prise,
.product-board .prising-area .purchase-number,
.product-board .prising-area .base-prise,

.product-board .prising-area .prising-btn{
    margin: 13px 10px;
    font-size: 14px;
    letter-spacing: 1px;
}

.product-board .prising-area .product-color label span,
.product-board .prising-area .product-size label span{
    padding: 0px 0.4em;
}

.product-board .prising-area .current-prise span{
    color: #F26422;
    font-size: 28px;
}

.product-board .prising-area .deal-prise input,
.product-board .prising-area .purchase-number input,
.product-board .prising-area .base-prise input{
    border:1px solid #ccc;
    width: 20px;
}






.product-board .prising-area .prising-btn input{
    width: 71px;
    font-size: 20px;
    font-weight: bold;
    float: right;
    margin: 0px 58px 0px 0px;
    background-image: linear-gradient(bottom, rgb(242,110,9) 50%, rgb(255,188,161) 100%);
    background-image: -o-linear-gradient(bottom, rgb(242,110,9) 50%, rgb(255,188,161) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(242,110,9) 50%, rgb(255,188,161) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(242,110,9) 50%, rgb(255,188,161) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(242,110,9) 50%, rgb(255,188,161) 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.5, rgb(242,110,9)),
        color-stop(1, rgb(255,188,161))
        );
}

.product-board .product-detail{
    position: relative;
    float: left;
    width: 100%;
}


.refer-area .records{
    width: 100%;
    height: 186px;
    border: 1px solid #CCC;
    box-shadow: 0px 0px 0px 2px #e2e2e2;
}

.refer-area .records table{
    width: 100%;
    text-align: left;
}
.refer-area .records table thead{
    font-weight: bold;
}

.refer-area .records table tbody{
    color:#555;
}

.refer-area .category{
    margin: 10px 0px;
    width: 100%;
    border: 1px solid #eef3fa;
    box-shadow: 0px 0px 0px 2px #e2e2e2;
}

.refer-area .proposal{
    width: 100%;
    border: 1px solid #eef3fa;
    box-shadow: 0px 0px 0px 2px #e2e2e2;  
}

.refer-area .records .block-title,
.refer-area .proposal .block-title,
.refer-area .category .block-title{
    background: #EEF3FA;
    font-size: 14px;
    padding: 0px 0px 0px 3px;
    font-weight: bold;
}
/*end product css*/


/*start prising css*/
.ui-prising-box .sign-content .sign-fields p.product-title{
font-size: 20px;
margin: 0px 0px 0px 127px;
border-bottom: 1px solid;
}
.ui-prising-box .sign-content .sign-fields .sign-field div{
    padding-left: 115px;
}
.ui-prising-box .sign-content .sign-fields .sign-field div input{
    width:20px;
    vertical-align: middle;
}

.ui-prising-box .sign-content .sign-fields .sign-field .current-prise{
    color: orange;
}

.ui-prising-box .sign-content .sign-fields .sign-field div span{
    display: block;
    font-size: 6px;
    color:#555;
    float: inherit;
    width:195px;
}
/*end prising css*/

/*start user history css*/

.my-history-content{
    height: auto;
overflow: auto;
background: white;
}
.my-history-content .history-summary,
.my-history-content .prising-history,
.my-history-content .search-bar{
    
   clear: both;
background: #f6f6f6;
margin: 0px auto 10px auto;
border: 1px solid #CCC;
width: 800px;
height: auto;
overflow: auto;
border-image: initial; 
}

.my-history-content>p{
    font-size: 16px;
font-weight: bold;
margin-left: 85px;
}


.my-history-content .history-summary .summary-block{
    float: left;
    width: 160px;
}

.my-history-content .history-summary .summary-block{
    float: left;
    width: 160px;
}

.my-history-content .history-summary .summary-qa{
    float: left;
    width: 320px;
}

.my-history-content .history-summary .summary-block p{
    
    text-align: center;
        font-weight: bold;
        font-size: 14px;
}

.my-history-content .history-summary .summary-block dl{
    margin: 5px;
    
    background: white;
    padding: 5px 10px;
    font-weight: bold;
    height: 110px;
}

.my-history-content .history-summary .summary-block dl dt{
    float: left;
    width: 100px;
    margin: 1px 0px;
}

.my-history-content .history-summary .summary-block dl dt label{
    display: inline-block;
    width: 75px;
}

.my-history-content .history-summary .summary-block dl dd{
    color: red;
    
    margin: 1px 0px;
}
/*end user history css*/
#qa_tabs table{
width: 100%;
height: 100%;
background: white;
}

#qa_tabs table tr{
    height:26px;
}

#qa_tabs table tr td{
    border: 1px #000000 solid;
}

.left-panel {
position: relative;
float: left;
width: 80px;
text-align: center;
margin-right: 5px;
}

#prising-tabs>ul>li:first-child{
    margin-left: 100px;
}

#right_panel .quick-filter {
position: relative;
float: left;
width: 713px;
background: #CCC;
height: 18px;
padding: 3px 1px;
}

#right_panel .quick-filter a{
    text-decoration: underline;
    float: right;
    margin: 0px 5px;
}

#right_panel .history-table{
    width: 100%;
}
#right_panel .history-table thead tr th{
    color:red;
    letter-spacing: -1px;
    text-align: left;
}

#right_panel .history-table thead tr th:first-child{
    width: 200px;
}

#right_panel .history-table tbody tr td.sub-title{
    color: white;
    background: black;
}

#right_panel .history-table tbody tr td.highlight{
   color:red;
}

#right_panel .history-table tbody tr{
    border: 1px solid #ccc;
}

#right_panel .history-table tbody tr.data-tr td{
    padding: 5px;
}

#right_panel .history-table tbody tr.placeholder{
    border: 0px solid #ccc;
    height: 10px;
}

#right_panel .history-table tbody tr td.right-border{
    border-right: 1px solid #ccc;
}








